<template>
  <div class="container">
    <div class="outer-border">
      <div class="title">土壤指标监测</div>
      <div class="columns">
        <div class="column">
          <dv-border-box8 class="inner-border">
            <div class="content">
              <h2>含氮量</h2>
              <p class="value">{{ nitrogen }} mg/kg</p>
            </div>
          </dv-border-box8>
        </div>
        <div class="column">
          <dv-border-box8 class="inner-border">
            <div class="content">
              <h2>含钾量</h2>
              <p class="value">{{ potassium }} mg/kg</p>
            </div>
          </dv-border-box8>
        </div>
        <div class="column">
          <dv-border-box8 class="inner-border">
            <div class="content">
              <h2>含磷量</h2>
              <p class="value">{{ phosphorus }} mg/kg</p>
            </div>
          </dv-border-box8>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  BorderBox8 as DvBorderBox8,
} from "@kjgl77/datav-vue3";
import { ref, onMounted } from "vue";
import axios from "axios";
import { useStore } from '@/store/index.js';

const nitrogen = ref(0);
const potassium = ref(0);
const phosphorus = ref(0);

// 定义 API 请求的函数
async function fetchSoilData(url: string, targetRef: any) {
  try {
    const userStore = useStore();
    const token = userStore.token;
    console.log('Token:', token); // 检查 token 是否正确
    const response = await axios.get(url, {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    });
    targetRef.value = response.data.value;
  } catch (error) {
    console.error(`Error fetching data from ${url}:`, error);
  }
}

// 在组件加载时调用 API 获取数据
onMounted(() => {
  fetchSoilData("/api/soil/N/latest?sensorType=Soil_N", nitrogen);
  fetchSoilData("/api/soil/K/latest?sensorType=Soil_K", potassium);
  fetchSoilData("/api/soil/L/latest?sensorType=Soil_L", phosphorus);
});
</script>

<style scoped>
/* 主容器：背景设置 */
.container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 外层边框样式 */
.outer-border {
  width: 80%;
  height: 90%; /* 调整整体高度 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 标题样式 */
.title {
  text-align: center;
  font-size: 1vw; /* 调小字体 */
  font-weight: bold;
  color: #00eaff;
  text-shadow: 0px 0px 8px #00eaff; /* 标题发光效果 */
  margin-bottom: 1vw;
}

/* 三列布局 */
.columns {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: 1vw; /* 减少列间间距 */
}

/* 每列样式 */
.column {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 内部边框样式 */
.inner-border {
  width: 80%; /* 缩小宽度 */
  height: 60%; /* 缩小高度 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(145deg, #0d1b2a, #1b263b); /* 内部渐变背景 */
  box-shadow: 0px 0px 10px 2px #3cffc1, inset 0px 0px 10px 2px rgba(0, 255, 255, 0.2);
  border-radius: 5px; /* 添加圆角 */
}

/* 内容样式 */
.content {
  text-align: center;
  color: #ffffff;
}

.content h2 {
  font-size: 1.0vw; /* 调小标题字体 */
  text-shadow: 0px 0px 5px #3cffc1;
}

.value {
  font-size: 1.0vw; /* 调小数值字体 */
  font-weight: bold;
  color: #00ffa3;
  text-shadow: 0px 0px 10px #00ffa3;
}
</style>
